<template>
    <div id="demo">
        <button @click="show=!show">Toggle</button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</template>

<script>
export default {
    data(){
        return {
            show:true,
        }
    }
}
</script>

<style lang="scss" scoped>
.fade-enter-active,.fade-enter-active {
    transition: opacity 3s ease;
}
.fade-enter-from,.fade-leave-to {
    opacity: 0;
}



</style>